/*
 * @Description: 中心显示
 * @Author: Zzt
 * @Date: 2023-01-09 14:10:51
 * @LastEditTime: 2023-02-07 20:41:06
 */

import { memo } from 'react';
import { Card, List, Avatar, Tag, Button, Badge, Space } from 'antd';
import classNames from 'classnames/bind';
import { toJS } from 'mobx';
import { observer } from 'mobx-react-lite';
import { appActions, appState } from '@/store/mobx';
import { routerActions, routerState } from '@/store/routerStore';
import styles from '../styles/subSysPicker.module.scss';

const cx = classNames.bind(styles);

interface IPicker {
  setLoginShowFlag: any;
}
const SubSysPicker = (props: IPicker) => {
  const { setLoginShowFlag } = props;

  const sysTree = toJS(routerState.orgNavTree);
  const userInfo = toJS(appState.userInfo);

  console.log('pick ', userInfo);

  /**
   * @description: 登出
   */
  const logoutFunc = async () => {
    await appActions.logout();
    setLoginShowFlag(true);
    // window.location.reload();
  };

  const linkTo = (navItem: any) => {
    routerActions.setSubSysId(navItem.id);
    // navigate('/welcome');
    window.open('/welcome');
  };

  return (
    <div className={cx('sub-sys-picker')}>
      <div className={cx('user-info')}>
        <div>欢迎您</div>
        <div className={cx('user-info-wrap')}>
          <div className={cx('detail')}>
            <Avatar size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}>
              {appState.realName[0]}
            </Avatar>
            <Space direction="vertical" size="middle">
              <div className={cx('user')}>
                <Space>
                  {appState.realName}|{'档案管理员'}
                </Space>
              </div>
              <div>这是您第36天使用档案管理系统</div>
              <div className={cx('department')}>
                <Tag color="#f50">部门</Tag>技术部
              </div>
              <div className={cx('dep-res')}>
                <Tag color="#2db7f5">职位</Tag>技术
              </div>
            </Space>
          </div>
          <div className={cx('btn-style')}>
            <Button type="link" onClick={logoutFunc}>
              退出登录
            </Button>
          </div>
        </div>
      </div>
      <div className={cx('sys-list')}>
        <div>数字档案馆</div>
        <div className={cx('card-overflow')}>
          <List
            grid={{
              gutter: 16,
              lg: 3,
              xl: 4,
              xxl: 4
            }}
            dataSource={sysTree}
            renderItem={(item) => (
              <List.Item>
                <Card
                  className={cx('card')}
                  onClick={() => linkTo(item)}
                  bodyStyle={{ padding: 0 }}
                >
                  <Badge count={item.sortNo} className={cx('card-change')} offset={[-15, 15]}>
                    <div className={cx('title')}>{item.rightsName}</div>
                  </Badge>
                </Card>
              </List.Item>
            )}
            className={cx('list')}
          />
        </div>
      </div>
    </div>
  );
};
export default memo(observer(SubSysPicker));
